<template>
  <div class="cityBox">
    <el-cascader
      placeholder="选择城市"
      :options="options"
      filterable
      :props="props"
      @change="onChange"
    />
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  defineEmits,
  defineProps,
  watch,
  defineModel,
} from "vue";
import citys from "./CityData.json";

let options = reactive(citys);
const onChange = (val) => {
  model.value = val;
};
const model = defineModel();
// 级联选择器属性绑定的值
let props = reactive({
  expandTrigger: "hover",
  emitPath: false,
  value: "code", // 选择获取哪个属性对应的值
  label: "label", // 选择获取哪个属性对应的标题
  children: "children", //指定子集
});
</script>
<style scoped lang="less"></style>
